import QtQuick 2.15

Item {
    id: topBar
    width: 800
    height: 29

    // 电池电量属性，范围0-3，对应0~3格电量
    property int batteryLevel: 3  // 默认满电

    //显示
    Rectangle {
            opacity: 1
            color: "#40A0A0"
            width: parent.width
            height: parent.height
    }
    Text{
        id: textDateTime
        x: 0
        y: 7
        text: currentDateTime();

        //anchors.left: parent
        //anchors.verticalCenter: parent
        color:"white"
    }
    // 电池电量显示组件
    Item {
        id: batteryDisplay
        x: parent.width - 80  // 右侧位置
        y: 7
        width: 50
        height: 20

        // 电池外框
        Rectangle {
            id: batteryOutline
            width: 34
            height: 15
            color: "transparent"
            border.color: "white"
            border.width: 1
            radius: 2
        }

        // 电池正极
        Rectangle {
            x: batteryOutline.x + batteryOutline.width
            y: batteryOutline.y + 4
            width: 3
            height: 7
            color: "white"
        }

        // 电量格1 (最左侧)
        Rectangle {
            id: batteryLevel1
            x: batteryOutline.x + 3
            y: batteryOutline.y + 3
            width: 8
            height: 9
            color: batteryLevel >= 1 ? "white" : "transparent"
            radius: 1
        }

        // 电量格2
        Rectangle {
            id: batteryLevel2
            x: batteryLevel1.x + batteryLevel1.width + 2
            y: batteryOutline.y + 3
            width: 8
            height: 9
            color: batteryLevel >= 2 ? "white" : "transparent"
            radius: 1
        }

        // 电量格3
        Rectangle {
            id: batteryLevel3
            x: batteryLevel2.x + batteryLevel2.width + 2
            y: batteryOutline.y + 3
            width: 8
            height: 9
            color: batteryLevel >= 3 ? "white" : "transparent"
            radius: 1
        }

        // 电量百分比文本
        Text {
            id: batteryText
            x: batteryOutline.x + batteryOutline.width + 8
            y: 1
            text: (batteryLevel * 33 + 1) + "%"  // 0格=1%，1格=34%，2格=67%，3格=100%
            color: "white"
            font.pixelSize: 12
        }
    }

    //当前日期时间
    function currentDateTime(){
        return Qt.formatDateTime(new Date(), "dd-MM-yyyy hh:mm:ss");
    }

    // 设置电池电量函数
    function setBatteryLevel(level) {
        if (level >= 0 && level <= 3) {
            batteryLevel = level;
        }
    }

    //定时器
    Timer{
        id: timer
        interval: 1000 //间隔(单位毫秒):1000毫秒=1秒
        repeat: true //重复
        onTriggered:{
            textDateTime.text = currentDateTime();
            setBatteryLevel(mymodbus.batteryLevel);
        }
    }

    Component.onCompleted: {
        timer.start();
    }
}
